import {useEffect, useState} from 'react';
import { Select } from 'antd';
import { list } from '@/services/system/job';

const { Option } = Select;

const SystemJobSelect = (props) => {
  const {onChange, value, placeholder, multiple, deptId} = props;

  const [listDate, handleListDate] = useState([]);
  const [roleValue, handleRoleValue] = useState(undefined);

  useEffect( () => {
    const lostData = async () => {
      if (deptId) {
        const result = await list(deptId);
        handleListDate(result.data)
      } else {
        handleListDate([])
      }
    };

    lostData().then(() =>{
      handleRoleValue(value || undefined)
    });
  }, [deptId]);

  const selectItem = (e) => {
    handleRoleValue(e)
    onChange(e)
  }

  const options = listDate.map(job => <Option key={job.id} value={job.id}> {job.name} </Option>);

  return (
    multiple ? (
      <Select onChange={selectItem} mode='multiple' value={roleValue} placeholder={placeholder}>
        {options}
      </Select>
    ) : (
      <Select onChange={selectItem} value={roleValue} placeholder={placeholder}>
        {options}
      </Select>
    )
  )
}

export default SystemJobSelect;